<template>
	<view class="page">
		<view class="address-list-box send-address-box">
			<view class="address-box">
				<view class="address-title">
					发货地址
				</view>
				<view class="right-box">
					<view class="button" @click="addAddress('send')">
						新增
					</view>
					<view class="icon-box" @click="typeChange('send')">
						<image class="icon" :class="{'down': sendType == false}" src="/static/image/user/up_icon.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="card-box" :class="{'open': sendType == true,'close' : sendType == false}" v-if="sendType == true">
				<Addresscard @edit="editAddress"></Addresscard>
				<Addresscard></Addresscard>
				<Addresscard></Addresscard>
				<Addresscard></Addresscard>
			</view>
		</view>
		<view class="address-list-box receive-address-box">
			<view class="address-box">
				<view class="address-title">
					收货地址
				</view>
				<view class="right-box">
					<view class="button" @click="addAddress('receive')">
						新增
					</view>
					<view class="icon-box" @click="typeChange('receive')">
						<image class="icon" :class="{'down': receiveType == false}" src="/static/image/user/up_icon.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="card-box" :class="{'open': receiveType == true,'close' : receiveType == false}" v-if="receiveType == true">
				<Addresscard></Addresscard>
				<Addresscard></Addresscard>
				<Addresscard></Addresscard>
				<Addresscard></Addresscard>
			</view>
		</view>
	</view>
</template>

<script>
	import Addresscard from '../component/address/card.vue';
	export default {
		components:{
			Addresscard
		},
		data() {
			return {
				sendType:false, // 发货地址收缩显示状态
				receiveType:false, // 收货地址收缩显示状态
			}
		},
		methods: {
			typeChange:function(type){
				if(type == 'send'){
					let sendType = this.sendType;
					this.sendType = !sendType;
				}else if(type == 'receive'){
					let receiveType = this.receiveType;
					this.receiveType = !receiveType;
				}
			},
			/**
			 * 添加地址触发事件
			 */
			addAddress:function(type){
				let param = '?type=add&addresstype=';
				if(type == 'receive'){
					param = param + 'receive'
				}else if(type == 'send'){
					param = param + 'send'
				}
				uni.navigateTo({
					url: '/pages/user/address/edit'+ param
				});
			},
			/**
			 * 编辑按钮触发事件
			 */
			editAddress:function(data){
				let param = '?type=edit&addresstype=';
				if(data.type == 'receive'){
					param = param + 'receive'
				}else if(data.type == 'send'){
					param = param + 'send'
				}
				param = param + '&id=' + param.id;
				uni.navigateTo({
					url: '/pages/user/address/edit'+ param
				});
			},
			/**
			 * 删除地址触发事件
			 */
			deleteAddress:function(){
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #fafafa;
		min-height: 100vh;
	}
	.address-list-box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.address-box{
			overflow: hidden;
			.address-title{
				display: inline-block;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 60rpx;
			}
			.right-box{
				float: right;
				display: flex;
				.button{
					color: white;
					line-height: 60rpx;
					padding: 0 30rpx;
					background-color: #2dc147;
					border-radius: 10rpx;
					font-size: 28rpx;
				}
				.icon-box{
					margin-left: 40rpx;
					width:60rpx;
					height:60rpx;
					.icon{
						width: 100%;
						height: 100%;
					}
					.down{
						transform:rotate(180deg);
					}
					
				}
			}
		}
	}
	.open{
			animation-name: cardshow;
			animation-duration: 1s;
			overflow: hidden;
		}
		@keyframes cardshow {
			0% {
				transform:translate(0%,-10%);
				opacity: 0;
			}
		
			100% {
				transform:translate(0%,0%);
				opacity: 1;
			}
		}
</style>
